import React from 'react';
import { Card, Checkbox, Row, Col, Button, message } from 'antd';
import { connect } from 'dva';
//用户管理权限
import { administratorsSa, administratorsSave } from '../../services/API';
// import { DeleteOutlined, FormOutlined } from '@ant-design/icons'
import styles from './index.less';
// import { connect } from 'dva';
/**
 *  用户管理中心
 */
@connect(({ access }) => {
  return {
    powerList: access.powerList
  };
})
class AccessPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pluginListFile: [],
      adminChooseAll: false,
      cusChooseAll: false
    };
    // checked: false // 默认没有选中
  }
  administratorsSa = async () => {
    let data = await administratorsSa();
    if (data.code === 200) {
      this.setState(
        {
          pluginListFile: data.data,
          adminChooseAll: false,
          cusChooseAll: false
        },
        () => {
          this.chooseAllorNot();
        }
      );
    }
  };
  administratorsSave = async () => {
    delete this.state.pluginListFile[0].id;
    delete this.state.pluginListFile[1].id;
    let data = await administratorsSave({ admins: JSON.stringify(this.state.pluginListFile) });
    if (data.code === 200) {
      message.success(data.msg || 'Ok');
      this.administratorsSa();
    }
  };
  isAuthKey(key) {
    return key !== 'id' && key !== 'roleId' && key !== 'shopId';
  }
  handleChange = (role, e) => {
    let status = e.target.checked;
    if (role === 'admin') {
      this.setState(
        {
          adminChooseAll: !this.state.adminChooseAll
        },
        () => {
          let _pluginListFile = Object.assign([], this.state.pluginListFile);
          Object.keys(_pluginListFile[role === 'admin' ? 0 : 1]).map(item => {
            _pluginListFile[role === 'admin' ? 0 : 1][item] = status ? 1 : 0;
          });
          this.setState({
            pluginListFile: _pluginListFile
          });
        }
      );
    } else {
      this.setState(
        {
          cusChooseAll: !this.state.cusChooseAll
        },
        () => {
          let _pluginListFile = Object.assign([], this.state.pluginListFile);
          Object.keys(_pluginListFile[role === 'admin' ? 0 : 1]).map(item => {
            _pluginListFile[role === 'admin' ? 0 : 1][item] = status ? 1 : 0;
          });
          this.setState({
            pluginListFile: _pluginListFile
          });
        }
      );
    }
  };

  onChangeAlone(params, item, index) {
    let _pluginListFile = [...this.state.pluginListFile];
    _pluginListFile[index] = Object.assign({}, this.state.pluginListFile[index], {
      [item]: params[item] === 1 ? 0 : 1
    });
    this.setState(
      {
        pluginListFile: _pluginListFile
      },
      () => {
        this.chooseAllorNot();
      }
    );
  }
  chooseAllorNot() {
    let adminChooseAll = true;
    let cusChooseAll = true;
    this.state.pluginListFile.map((ditem, i) => {
      Object.keys(ditem).map(item => {
        if (!ditem[item] && item !== 'id' && item !== 'shopId' && item !== 'roleId') {
          if (i === 0) {
            adminChooseAll = false;
          } else if (i === 1) {
            cusChooseAll = false;
          }
          return false;
        }
      });
    });
    this.setState({
      cusChooseAll,
      adminChooseAll
    });
  }
  //挂载
  async componentDidMount() {
    //进入页面调用一次
    await this.administratorsSa();
  }
  render() {
    return (
      <div className={styles.accessPage} style={{ position: 'relative' }}>
        <h2>Access management</h2>
        <Card bordered={false}>
          <h3>Administrators</h3>
          <Row style={{ margin: '20px 0' }}>
            <Col span={24}>
              <Checkbox
                value="Select all"
                checked={this.state.adminChooseAll}
                onChange={e => this.handleChange('admin', e)}
              >
                Select all
              </Checkbox>
            </Col>
          </Row>
          <Row style={{ margin: '20px 0' }}>
            {
              //遍历每个单选框点击
              this.state.pluginListFile.length > 0 &&
                Object.keys(this.state.pluginListFile[0]).map(item => {
                  if (!(item.includes('id') || item.includes('roleId') || item.includes('shopId'))) {
                    return (
                      <Col span={6} key={item}>
                        {/* 在标签内判断单选不选 */}
                        <Checkbox
                          onChange={e => this.onChangeAlone(this.state.pluginListFile[0], item, 0)}
                          checked={this.state.pluginListFile[0][item] == 1 ? true : false}
                        >
                          {item}
                        </Checkbox>
                      </Col>
                    );
                  }
                })
            }
          </Row>
        </Card>
        <Card bordered={false} style={{ marginTop: '20px' }}>
          <h3>Staff</h3>
          <Row style={{ margin: '20px 0' }}>
            <Col span={24}>
              {/* 触发全选按钮事件 */}
              <Checkbox
                value="Select all"
                checked={this.state.cusChooseAll}
                onChange={e => this.handleChange('cus', e)}
              >
                Select all
              </Checkbox>
            </Col>
          </Row>

          <Row style={{ margin: '20px 0' }}>
            {this.state.pluginListFile.length > 0 &&
              Object.keys(this.state.pluginListFile[1]).map(item => {
                if (!(item.includes('id') || item.includes('roleId') || item.includes('shopId'))) {
                  return (
                    <Col span={6} key={item}>
                      <Checkbox
                        onChange={e => this.onChangeAlone(this.state.pluginListFile[1], item, 1)}
                        checked={this.state.pluginListFile[1][item] == 1 ? true : false}
                      >
                        {item}
                      </Checkbox>
                    </Col>
                  );
                }
              })}
          </Row>
        </Card>
        <Button
          type="primary"
          htmlType="submit"
          onClick={() => this.administratorsSave()}
          className="Save-form-button"
          style={{ position: 'absolute', left: '30%', bottom: '-50px' }}
        >
          Save
        </Button>
      </div>
    );
  }
}
export default AccessPage;
